<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div class="app">
        <h1>
            组件总结
        </h1>
        <p>
            几个注意点:
            1.关于组件名:
                一个单词组成:
                    第一种写法(首字母小写):+school
                    第二种写法(首字母大写):School

                多个单词组成:
                    第一种写法(kebab-case命名):my-school
                    第二种写法(CamelCase命名):MySchool(需Vue脚手架支持)

            备注:
            (1).组件名尽可能回避HTML中已有的元素名称，例如:h2、H2都不行。
            (2).可以使用name配置项指定  组件在开发者工具  中呈现的名字。


            2.关于组件标签:第一种写法:<school></school>第二种写法:<school/>
            备注:不用使用脚手架时，<schoo1/>会导致后续组件不能染，
            3.一个简写方式:
            const school =Vue.extend(options)可简”为:const school = options    
        </p>
       {{msg}}
       <school></school>

    </div>
</body>
<script>
    Vue.config.productionTip = false;
    // 创建组件1
    const school=Vue.extend({
        template:`
            <div>
                <h3>学校名称：{{schoolName}}</h3>
                <h3>地址：{{address}}</h3>
            </div>`
        ,
        data(){
            return {
                schoolName:'北京大学',
                address:"哈哈"
            }
        }
    });
  
    //创建vm
    new Vue({
        el:'.app',
        //注册组件
        components:{
            school:school
        },
        data:{
            msg:'hello world'
        }
    });
</script>
</html>